<template>
  <div class="planIndex">
    <userHeader/>
    <div class="breadClum">
      <span>
         <router-link :to="{path:'/pageIndex'}">  <a class="bread1">当前位置：首页  >  </a></router-link>
         <router-link :to="{path:'/comment'}">  <a class="bread2">内控评价  ></a></router-link>
           <a class="bread2">评价管理</a>
      </span>
    </div>
    <div class="evaluation-management-container">
      <div class="evaluation-management-content">
        <el-table
          ref="evaluationList"
          :data="evaluationList"
          :cell-class-name="cell"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="70">
          </el-table-column>
          <el-table-column
            prop="company_name"
            width="314">
            <template slot="header" slot-scope="scope">
              <el-dropdown style="color:#5d9120;font-size:16px;margin-bottom:-8px;" trigger="click" @command="handleElementList">
                <span class="el-dropdown-link">
                  {{companyName}}<em class="arrow"></em>
                </span>
                <el-dropdown-menu slot="dropdown" style="height: 300px;overflow-y: scroll">
                  <el-dropdown-item v-for="item in formatData2" :command="item.company_id" :key="item.element_id">{{item.company_name}}</el-dropdown-item>
                  <el-dropdown-item command="none" v-if="formatData2.length==0">暂无数据</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column
            prop="evareport_name"
            label="报告名称"
            width="322">
          </el-table-column>
          <el-table-column
            prop="evaplan_type_name"
            label="评价类型"
            width="156">
          </el-table-column>
          <el-table-column
            prop="current_time"
            label="生成日期"
            width="224">
          </el-table-column>
          <el-table-column
            prop="audit_state_text"
            label="审核"
            width="120">
            <template slot="header" slot-scope="scope">
              <el-dropdown style="color:#5d9120;font-size:16px;margin-bottom:-8px;" trigger="click" @command="handleshenheList">
                <span class="el-dropdown-link">
                  {{shenheName}}<em class="arrow"></em>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in shenheState" :command="item.state" :key="item.name">{{item.name}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <el-table-column
            prop="audit_opinion"
            label="审核意见"
            width="356">
          </el-table-column>
          <el-table-column
            prop="auditor_name"
            label="审核人员"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            width="184">
            <template slot-scope="scope">
              <span>查看</span>
              <a :href=scope.row.evareport_path :download=scope.row.evareport_path>下载</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import userHeader from "@/components/header.vue";
import paganition from "@/components/paganition.vue";
import deleteAlarm from "@/components/deleteAlarm.vue";
import treeToArraysCompany from "@/page/test/index.js";
import {
  strToHexCharCode,
  toFixedBit,
  dec2hex,
  formatTime,
  getNewDate,
  formatDateTime
} from "@/utils/index.js";
import { mapState } from "vuex";

export default {
  data() {
    return {
      evaluationList: [],
      companyData:[],
      page:1,
      companyName:'',
      shenheName:"审核",
      audit_state:'',
      shenheState:[
        {
            state:0,
            name:'未审核'
        },
        {
          state:1,
          name:'已审核'
        }
      ]
    };
  },
  components: {
    userHeader,
    paganition
  },
  computed: {
    ...mapState({
      company_id: state =>
        state.app.loginState.company_id || sessionStorage.getItem("company_id"),
      company_name: state =>
        state.app.loginState.company_name ||
        sessionStorage.getItem("company_name"),
      company_pid: state =>
        state.app.loginState.company_pid || sessionStorage.getItem("company_pid")
    }),
    formatData2: function() {
      let tmp;
      console.log('`````````````');
      console.log(this.companyData);
      if (!Array.isArray(this.companyData)) {
        tmp = [this.companyData]
      } else {
        tmp = this.companyData
      }
      const func = this.evalFunc || treeToArraysCompany
      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
      console.log(func.apply(null, args))
      return func.apply(null, args)
    }
  },
  methods: {
    cell({row, column, rowIndex, columnIndex}) {
      //第八列添加 red 类
      if(columnIndex==1){
        return "belong-company"
      }
    },
    //初始化树状结构的公司列表
    initCompanyData(){
      this.axios.get('/api/v1/system/comsection?subor=collar').then((res)=>{
          console.log(res.data)
        if(res.data.code == 0){
          this.companyData =res.data.data;
          console.log(this.companyData)
        }else{
          //异常处理
        }
      })
    },
    //表格内控要素的筛选
    handleElementList(command){
      this.formatData2.map(item => {
        if(item.company_id==command){
          this.companyName =item.company_name
        }
      })
      this.companyId =command;
      this.getcompanyData(command,this.audit_state);
      console.log(this.companyName)
    },
    handleshenheList(command){
      this.shenheState.map(item => {
        if(item.state==command){
          this.shenheName =item.name;
        }
      })
      this.audit_state =command;
      this.getcompanyData(this.companyId,this.audit_state);
    },
    //获取指定公司用户
    getcompanyData(ID,state=1){
      this.axios.get('/api/v1/flow/evaluationreportmanage',{
        params:{
          company_id:ID,
          limit:10,
          page:this.page,
          audit_state:state
        }
      })
        .then((res)=>{
          if(res.data.code==0){
            this.evaluationList =res.data.data;
            this.pageSize =res.data.pagination.pages
            this.currentPage=res.data.pagination.page
          }
        })
    },
    initData(page){
        this.axios.get('/api/v1/flow/evaluationreportmanage',{
            params:{
              limit:10,
              page:page
            }
        }).then((res)=>{
            if(res.data.code==0){
                this.evaluationList =res.data.data;
            }
        })
    }
  },
  mounted(){
      this.initData(this.page);
      this.companyName =this.company_name;
  },
  created(){
    this.initCompanyData()
  },

};
</script>
<style scoped="">
.evaluation-management-container {
  padding-left: 10px;
  padding-right: 10px;
}

.evaluation-management-content {
  padding-top: 14px;
}

.evaluation-management-content >>> .el-table th.is-leaf {
  border-bottom: 1px solid #aac983;
  border-right: 1px solid #aac983;
  background: #d5e9bf;
  color: #5d9120;
  font-size: 16px;
}

.evaluation-management-content .el-table >>> .has-gutter .addIcon2 {
  display: inline-block;
  width: 17px;
  height: 15px;
  margin-left: 6px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  position: relative;
}

.evaluation-management-content .el-table >>> .has-gutter .addIcon2:before {
  position: absolute;
  content: "";
  left: 0;
  top: 65%;
  width: 100%;
  height: 100%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  background: #afd682 url("../../static/images/icon-down.png");
  background-repeat: no-repeat;
  background-position: center;
}
.arrow{
  display: inline-block;
  width: 17px;
  height:15px;
  margin-left:4px;
  border-radius:4px;
  position: relative;
}
.arrow::after{
  content:'';
  display: block;
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:2px;
  background: #afd682 url("../../static/images/icon-down.png") no-repeat center;
}
.evaluation-management-content .el-table >>> thead .cell .choiseManagement {
  cursor: pointer;
}
.evaluation-management-content .el-table .el-dropdown >>>  span{
  font-size: 14px;
}
.evaluation-management-content .el-table >>> .el-table__body-wrapper   .el-table__body  .el-table__row td.belong-company .cell{
  padding-left: 6px;
  padding-right: 0;
  font-size: 14px;
}
</style>
